<template>
  <div>
    <div class="bg"></div>
    <div class="form">
      <el-input v-model="username" placeholder="用户名"></el-input>
      <el-input v-model="password" type="password" placeholder="密码"></el-input>
      <el-button type="primary">登录</el-button>
    </div>
  </div>
</template>
<style lang="scss" scoped>
$color-ablue: #8ec5fc !default;
$color-apink: #e0c3fc !default;
$color-sblue: #2bd2ff !default;
$color-spink: #fa8bff !default;
$color-sgreen: #2bff88 !default;
.bg {
  width: 100%;
  height: 100vh;
  position: fixed;
  z-index: -2;
  @media (max-width: 760px) {
    background: -webkit-linear-gradient(87deg, $color-ablue, $color-apink);
    background: -o-linear-gradient(87deg, $color-ablue, $color-apink);
    background: -moz-linear-gradient(87deg, $color-ablue, $color-apink);
    background: linear-gradient(87deg, $color-ablue, $color-apink);
  }
  @media (min-width: 760px) {
    background: -webkit-linear-gradient(
      225deg,
      $color-sblue,
      $color-spink,
      $color-sgreen
    );
    background: -o-linear-gradient(
      225deg,
      $color-sblue,
      $color-spink,
      $color-sgreen
    );
    background: -moz-linear-gradient(
      225deg,
      $color-sblue,
      $color-spink,
      $color-sgreen
    );
    background: linear-gradient(
      225deg,
      $color-sblue,
      $color-spink,
      $color-sgreen
    );
  }
}
.form {
  position: absolute;
  overflow: hidden;
  background-color: #ffffff;
  width: 60%;
  margin: 5vh 10%;
  padding: 5vh 10%;
  div {
    margin: 10px 0;
  }
}
</style>
<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  }
}
</script>
